<template>
  <div class="notice_box">
    <p class="close" @click="close">
      <u-icon name="close" color="#999999" size="20"></u-icon>
    </p>
    <p class="img">
      <button class="b" open-type="share">
        <img mode="widthFix" src="https://zxsd-oss-img.oss-cn-chengdu.aliyuncs.com/e24b0dc7064976934350ba0ff0260c6b93d25b769d38655732e9bcaed96f623c.jpg" alt="" />
      </button>
    </p>

    <div class="img tc-img" @click="toPayList">
      <img mode="widthFix" :src="tcObj.picUrl" alt="" />
      <!-- <p>付费激活</p>
      <p>
        ¥<span>{{ tcObj.price / 100 }}</span>
      </p> -->
      <!-- <p class="anniu">立即付费</p> -->
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import api from "@/api";
export default {
  options: {
    styleIsolation: "shared",
  },
  props: {
    isRefresh4: {
      type: Number,
      default: 0,
    },
  },
  watch: {
    isRefresh4: {
      handler(n, o) {
        console.log("1111");
        if (n) {
          this.getTc();
        }
      },
    },
  },
  data() {
    return {
      tcObj: {},
    };
  },
  computed: {
    ...mapState({
      userId: (state) => state.user.userId,
      token: (state) => state.user.token,
      status: (state) => state.user.status,
    }),
    price() {
      return (this.tcObj.price / 100).toFixed(2);
    },
  },
  methods: {
    close(state) {
      this.$emit("close", state);
    },
    toPayList() {
      uni.navigateTo({
        url: "/pages/taocan/index",
      });
    },
    async toTaoCan() {
      let data = {
        spuId: this.tcObj.id,
        count: 1,
      };
      let payOrderId = "";
      await api.user.order_create(data).then((res) => {
        if (res.code == 200) {
          payOrderId = res.data.payOrderId;
        } else {
          uni.hideLoading();
          this.isDisable = false;
          this.$toast(res.msg);
        }
      });
      if (payOrderId) {
        let canshu = {
          id: payOrderId,
          channelCode: this.tcObj.price ? "wx_lite" : "free_pay",
        };
        await api.user.pay_order(canshu).then((res) => {
          if (res.code == 200) {
            let payObj = JSON.parse(res.data.displayContent);
            console.log(payObj);
            uni.requestPayment({
              timeStamp: payObj.timeStamp,
              nonceStr: payObj.nonceStr,
              package: payObj.packageValue,
              signType: payObj.signType,
              paySign: payObj.paySign,
              success: (succ) => {
                console.log(succ);
                if (succ.errMsg === "requestPayment:ok") {
                  uni.hideLoading();
                  this.$toast("支付成功～");
                  this.close(true);
                  // uni.navigateTo({
                  // 	url: '/pages/taocan/gmList/index'
                  // });
                }
              },
              fail: (err) => {
                uni.hideLoading();
                this.$toast("支付失败！");
              },
            });
          } else {
            uni.hideLoading();
            this.isDisable = false;
            this.$toast(res.msg);
          }
        });
      }
    },

    async getTc() {
      await api.user.list_by_ids({ status: 1, type: 1 }).then((res) => {
        if (res.code == 200) {
          this.tcObj = res.data[0];
        }
      });
    },
  },
  mounted() {},
  onLoad() {},
  onShow() {
    getTc();
  },
  // onShareAppMessage() {
  // 	return {
  // 		title: '免费用万人接单群',
  // 		path: `/pages/index/index?shareUserId=${this.userId}`
  // 	}
  // },
};
</script>

<style lang="scss" scoped>
@mixin content-flex($pitch) {
  display: flex;
  align-items: center;
  justify-content: $pitch;
}
.notice_box {
  border-radius: 20rpx;
  padding: 0 30rpx 30rpx 30rpx;
  .close {
    display: flex;
    justify-content: flex-end;
    padding-top: 24rpx;
  }
  .img {
    margin-top: 22rpx;
    position: relative;
    width: 100%;
    img {
      width: 100%;
    }
    button {
      padding: 0;
      margin: 0;
      border: none;
      background: none;
      &.b::after {
        border: none;
      }
    }
    .anniu {
      width: 87px;
      height: 60rpx;
      line-height: 60rpx;
      border-radius: 100rpx;
      background: #13b0bf;
      position: absolute;
      top: 42%;
      right: 70rpx;
      text-align: center;
      font-size: 28rpx;
      color: #fff;
    }
  }
}
</style>
